import React from 'react';
import { useState, useEffect, useDeferredValue } from 'react'

// 执行的过程:
// 当useEffect 的依赖的值不存在的时候, 当keyword 变化和当list 变化, 都会导致函数组件重新渲染
// 当useEffect 的依赖值存在为keyword ,这样, 只有keyword 变化的时候, 函数组件才会重新渲染

// 当监听的值为keyowrd时, keyword 变化几次, console.log('执行了');就执行几次
// 当监听的的数据为副本数据 useDeferredValue()拷贝的数据, 这样他的执行会延迟执行, 最后useEffect 的执行次数减少

// 例如: 利用监听 keyowrd 改变5次 useEffect就执行了5次
// 监听 newkeyword, 改变5次, 则最终执行了2次, 这样起到防抖节流的作用, 利于性能优化
//  注意: 一定是高频才有区别: 否则没有区别
const Father = () => {
    const [keyowrd, setkeyword] = useState('')
    const [listArr, setlistArr] = useState([])

    // 使用useDeferredValue 创建一个副本
    const newkeyword = useDeferredValue(keyowrd);
    //console.log('newkeyword123', newkeyword); // 和之前的keyowrd一致
    useEffect(() => {
        const list = []
        for (let i = 0; i < 30000; i++) {
            list.push(String(i))
        }

        const newlist = list.filter(item => item.includes(newkeyword))
        setlistArr(newlist)
        console.log('执行了');
    }, [newkeyword])

    return (
        <div>
            {/* 搜索框 */}
            <p><input type='text' value={keyowrd} onChange={(e) => {
                setkeyword(e.target.value)
            }} /></p>
            {/* 遍利渲染 */}
            <ul>
                {

                    listArr.map((item, index) => <li key={index}>{item}</li>)
                }

            </ul>


        </div>
    );
}

export default Father;
